<template>

	<div class="nav">
		<div class="header-top">
			<span class="welcome-wt">我图网欢迎您，专注正版设计作品交易平台</span>
			<div class="clearfix">
				<div class="login-box">

					<a href="" class="common">请登录</a>

				</div>
				<div class="register">
					<a href="" class="common">免费注册</a>

				</div>
				<div class="recharge-top">
					<a href="" class="common">充值</a>
				</div>
				<div class="link-vip">
					<a href="" class="common">特惠VIP<span class="one">1</span></a>

				</div>
			</div>
		</div>

		<div class="position">
			<div class="header-content">
				<div class="logo">
					<a class="logo-a" href=""><img src="../../../static/goods/logo.jpg" /></a>
				</div>
				<div class="search-box">
					<div class="right-btn">
						<a class="right-btn-a" href=""><span class="right-btn-a-span"></span>购物车</a>
					</div>
					<div class="fixed-search">
						<input class="search-input" type="text" name="" id="" value="" placeholder="请输入标题、关键字、编号搜索" />
						<a href="" class="searchbtn">
							<span class="searchbtn-img"></span>
						</a>
					</div>
				</div>

			</div>

		</div>
		<div class="place">
			<div class="place-color">
				位置：背景|装饰画 > 电视背景墙 > 3D电视背景墙 > 3d立体圆球抽象建筑空间现代感电视背景墙
			</div>
		</div>
		<goodscontent></goodscontent>
	</div>
</template>

<script>
	import goodscontent from "../goodscontent/goodscontent.vue"
	export default {
		components: {
			goodscontent,
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	.nav {
		position: relative;
		width: 100%;
		height: 32px;
		background: #f2f2f2;
		font-size: 12px;
		z-index: 800;
		.header-top {
			width: 1200px;
			margin: 0 auto;
			line-height: 32px;
			.welcome-wt {
				display: inline-block;
			}
			.clearfix {
				display: inline-block;
				float: right;
				.login-box,
				.register,
				.recharge-top,
				.link-vip {
					display: inline-block;
					.common {
						width: 48px;
						height: 17px;
						text-decoration: none;
					}
				}
				.login-box {
					.common {
						color: rgb(255, 114, 0);
						padding: 0 22px;
						&:hover {
							color: rgb(0, 175, 109);
						}
					}
				}
				.register {
					.common {
						border-left: 1px solid rgb(115, 115, 115);
						color: rgb(115, 115, 115);
						padding: 0 22px;
						&:hover {
							color: rgb(0, 175, 109);
						}
					}
				}
				.recharge-top {
					.common {
						border-left: 1px solid rgb(115, 115, 115);
						color: rgb(115, 115, 115);
						padding: 0 22px;
						&:hover {
							color: rgb(0, 175, 109);
						}
					}
				}
				.link-vip {
					.common {
						border-left: 1px solid rgb(115, 115, 115);
						color: rgb(115, 115, 115);
						padding: 0 0 0 22px;
						.one {
							padding: 0 3px;
							color: white;
							background: rgb(255, 114, 0);
							border-radius: 4px;
						}
						&:hover {
							color: rgb(0, 175, 109);
						}
					}
				}
			}
		}
		.position {
			width: 100%;
			height: 100px;
			background: white;
			.header-content {
				width: 1200px;
				height: 78px;
				margin: 0 auto;
				padding-top: 30px;
				.logo {
					display: inline-block;
				}
				.search-box {
					flex: 1;
					float: right;
					width: 740px;
					height: 66px;
					.fixed-search {
						display: inline-block;
						width: 536px;
						height: 40px;
						margin-bottom: 5px;
						.search-input {
							box-sizing: border-box;
							width: 450.233px;
							height: 40px;
							border: 2px solid rgb(0, 175, 109);
							padding: 0 10px;
							outline: none;
							color: rgb(178, 178, 178);
						}
						.searchbtn {
							float: right;
							width: 76px;
							height: 40px;
							background: rgb(0, 175, 109);
							margin-right: 9.78px;
							.searchbtn-img {
								display: block;
								background-image: url(header.png);
								background-repeat: no-repeat;
								background-position: -16px 0;
								width: 25px;
								height: 27px;
								margin: 10px auto;
							}
						}
					}
					.right-btn {
						display: inline-block;
						float: right;
						/*width: 127px;*/
						height: 42px;
						border: 1px solid rgb(127, 127, 127);
						.right-btn-a {
							display: block;
							width: 141px;
							text-decoration: none;
							color: rgb(91, 91, 91);
							font-size: 15px;
							line-height: 44px;
							.right-btn-a-span {
								vertical-align: middle;
								display: inline-block;
								margin: 0 10px;
								width: 20px;
								height: 20px;
								background: url(header.png);
								background-position: -40px 0;
							}
						}
					}
				}
			}
		}
		.place {
			width: 100%;
			height: 48px;
			.place-color {
				width: 1200px;
				height: 48px;
				margin: 0 auto;
				line-height: 48px;
				font-size: 14px;
			}
		}
	}
</style>